<extend name="desktop_default/template/base_index2" />

<block name="area_header">

    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
    <script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.min.js"></script>
    <link href="__CSS__/cart.css?v=__APP_VERSION__" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .cart-item{
            font-size: 1rem;
            background: #fbfcff;
            min-height: auto;
        }
        .cart-main{
            width:100%;
        }
        .cart-table-th .th-chk{
            height: 20px;
        }
        .th .td-inner{
            padding: 0px;
        }
        .td-item .item-info {
            margin: -3px 0 0 50px;
            padding-right: 0px;
            OVERFLOW: HIDDEN;
            HEIGHT: 18PX;
        }
        .manage-address .address-item {
            display: inline-block;
            vertical-align: top;
            position: relative;
            width: 237px;
            height: 106px;
            margin: 0 14px 14px 0;
            color: #666;
            cursor: pointer;
            font-size: 1.2rem;
        }
        .manage-address .address-item .inner{
            z-index: 2;
            position: relative;
            padding: 11px 15px;
            background: url(__IMG__/order/border.png) no-repeat;
            overflow: hidden;
            height: 106px;
        }
        .manage-address .address-item.addr-cur .inner{
            background: url(__IMG__/order/hover_border.png) no-repeat;
        }
        .manage-address .address-item .addr-hd{
            width: 100%;
            border-bottom: 1px solid #f2f2f2;
            padding: 0 0 5px;
            margin-bottom: 10px;
            height: 24px;
            line-height: 18px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .manage-address .address-item .deftip{
            background: #ccc;
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 2px;
            text-decoration: none;
            display: none;
            filter: alpha(opacity=70);
            opacity: .7;
            z-index: 3;
        }
        .manage-address .address-item.addr-cur .deftip{
            display: block;
        }


        .order-confim .title{

            margin: 0px;
            font-size: 1.6rem;
        }
        .order-confim .notes{
            background: #f2f6ff;
            padding-top: 5px;
            padding-bottom: 5px;
            vertical-align: top;
        }

        .order-confim .notes.focus textarea{
            height: 60px;
        }
        .order-confim .idcode{
            width: 200px;
            padding: 5px;
            font-size: 1rem;
            border: 1px solid #ff4400;
            height: 28px;
            line-height: 28px;
            padding-left: 5rem;
        }
        .order-confim .pay_type_item{
            position: relative;
            border: 1px solid #ddd;
            height: 18px;
            line-height: 18px;
            padding: 5px 24px;
            cursor: pointer;
        }
        .order-confim .am-list>li.pay_type_item a:hover{
            text-decoration: none;
        }
        .order-confim .am-list>li.pay_type_item b{
            display: none;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 12px;
            height: 12px;
            overflow: hidden;
            background: url(__IMG__/order/selected-icon.png) no-repeat;
        }
        .order-confim .am-list>li.pay_type_item.selected b{
            display: block;
        }
        .order-confim .am-list>li.pay_type_item:hover,
        .order-confim .am-list>li.pay_type_item.selected{
            border: 2px solid #e4393c;
            padding: 4px 23px;
        }
        .order-confim .am-list>li.pay_type_item a{
            color: #333333;
            padding: 0px;
        }
        .order-confim .am-list>li.pay_type_item{
            margin-right: 10px;
            height: auto;
        }

        .order-confim .money{
            color:#f40;
        }
        .order-confim .money .price{
            width: 90px;
            display: inline-block;
        }


        .order-confim .i-btn-cal{
            cursor: pointer;
            margin-top: -6px;
            font-style: normal;
            padding: 8px;
            top: 6px;
            height: 28px;
            left: 0px;
            background: #D46666;
            color: #fff;
        }

    </style>

</block>

<block name="area_body">
    <include file="desktop_default/width/right" />

    <header class="header">
        <include file="desktop_default/width/top" />
        {:W('Partials/nav_group')}
    </header>

    <div class="order-confim am-margin-bottom-lg">
        <form class="confirm_form" method="post">
            <input type="hidden" name="uid" value="{$user.uid}" />
            <input type="hidden" class="adddressid" name="addressid" value="{$user.default_address}" />
        <div class="shop-container">
            <include file="desktop_default/partial/buy_step" step="2" />


        <div class="am-padding-top-sm am-padding-bottom-sm am-cf"><h6 class="title">选择收货地址</h6></div>
        <div  class="manage-address">
            <volist name="address" id="vo">
                <div data-addressid="{$vo['id']}" class="address-item <eq name="vo['id']" value="$default_address">addr-cur</eq>">
                    <div class="inner">
                    <div class="addr-hd">{$vo.province}{$vo.city}  {$vo.contactname}</div>

                    <div title="{$vo.area}{$vo.detailinfo}" class="addr-bd">
                        <span class="dist">{$vo.city}</span>
                        <span class="town">{$vo.area}</span>
                        <span class="j_4tip"></span>
                        <span class="street">{$vo.detailinfo}</span>
                        <span class="phone">{$vo.mobile}</span>
                        <span class="last">&nbsp;</span>
                    </div>
                    <div class="toolbar">&nbsp;</div>
                    </div>
                    <ins class="curmarker"></ins>
                    <ins class="deftip">默认地址</ins>
                </div>
            </volist>
            <div class="am-cf">
            <button
                    type="button"
                    class="am-btn am-btn-primary am-btn-sm am-fl"
                    data-am-modal="{target: '#addressModel', closeViaDimmer: 0, width: 640, height: 540}">
                新收货地址
            </button>
                <a style="color: #C97;" class="am-btn am-sm am-btn-link am-text-sm am-fr" href="{:U('Shop/User/address')}">管理收货地址</a>
            </div>
        </div>

        <div class="am-padding-top-sm am-padding-bottom-sm "><h6 class="title">选择支付方式</h6></div>
        <div class="am-cf">
            <ul class="am-list am-cf">
                <li class="am-fl pay_type_item js_pay_type selected">
                    <b></b>
                    <a href="javascript:void(0);">
                    <input class="am-hide" type="radio" name="pay_type" value="1" checked />
                    支付宝支付
                    </a>
                </li>
            </ul>
        </div>
        <div class="am-padding-top-sm am-padding-bottom-sm "><h6 class="title">确认订单信息</h6></div>
        <div class="cart-main cart_list am-cf">
            <div class="am-cf cart-table-th">
                <div class="th th-chk">
                    <div class="select-all ">
                    </div>
                </div>

                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>

                <div class="th th-info">
                    <div class="td-inner">&nbsp;</div>
                </div>

                <div class="th th-price">
                    <div class="td-inner">单价（元）</div>
                </div>

                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>

                <div class="th th-sum">
                    <div class="td-inner">小计（元）</div>
                </div>


            </div>

            <volist name="cart" id="vo">
                <div class="cart-item am-fl am-margin-top-sm">
                    <div class=" am-fl td td-chk">
                    </div>

                    <div class="am-fl td td-item am-padding-sm">
                        <img class="am-fl icon-url" src="{:getImageUrl($vo['icon_url'],80)}" alt="图片" STYLE="width: 50px;height:50px;" />

                        <div class="item-info">
                            <div class="item-basic-info am-padding-left-sm">
                                <a target="_blank" href="{:U('Shop/Product/detail',array('id'=>$vo['p_id']))}">{$vo.name}</a>
                            </div>
                        </div>
                    </div>
                    <div class="td td-info js_item_price am-fl am-padding-sm">
                        {$vo.sku_desc}
                    </div>
                    <div class="td td-price js_item_price am-fl am-padding-sm">
                        <div class="price-content">
                            <div class="price-line">
                                <span class="price-original">{:round($vo['ori_price'],2)}</span>
                            </div>
                            <div class="price-line">
                                <span class="price-now" tabindex="0">{:round($vo['price'],2)}</span>
                            </div>
                        </div>

                    </div>
                    <div class="td td-amount js_item_count am-fl am-padding-sm">
                        {$vo.count}
                    </div>
                    <div class="js_item_total_price td td-sum am-fl am-padding-sm">
                        {:round($vo['count'] * $vo['price'],2)}
                    </div>
                </div>
            </volist>
        </div>

        <div class="notes am-cf">
            <label class="am-padding-sm am-fl" style="color: #999;font-size: 1.2rem;">买家留言：</label>
            <div class="am-padding-sm">
                <textarea style="width:240px;border:1px solid #ccc;" rows="1" class="am-fl " placeholder="选填"  name="note"  ></textarea>
            </div>
        </div>

        <div>

        </div>

        <div class="money  am-cf">

            <div class="am-block am-text-right ">
                <span class="money-title">总计：¥</span>
                <span class="am-text-danger am-text-lg price">{$total_price}</span>
            </div>
            <div class="am-block am-text-right">
                <span class="money-title">关税：¥</span>
                <span class="am-text-danger am-text-lg js_tax_price price">+{$tax_price}</span>
            </div>
            <div class="am-block am-text-right">
                <span class="money-title">优惠：¥</span>
                <span class="am-text-danger am-text-lg js_discount_price price">-{$discount_price}</span>
            </div>
            <div CLASS="am-block am-text-right js_other_dis am-cf am-hide idcode_some">
                <empty name="idcode_list">
                    <span class="am-text-muted">无历史优惠码</span>
                    <else/>
                    <select placeholder="请输入优惠码"  id="select2_code" class="am-form-field idcode" >
                        <option value="">=选择历史优惠码=</option>
                        <volist name="idcode_list" id="vo" >
                            <option value="{$vo.idcode}">{$vo.idcode}</option>
                        </volist>
                    </select>
                </empty>

            </div>
            <div class="am-block am-text-right js_other_dis am-cf">

                <label class="am-margin-right-sm"><input type="checkbox" onclick="toggleIDCode();" />使用优惠码<span class="am-text-danger">(可以更优惠哦)</span></label>
                <div class="am-fr am-form-icon am-hide idcode_some">
                    <i class="am-icon-search js_cal i-btn-cal" >查询</i>
                    <input placeholder="请输入优惠码" type="text" id="idcode" name="idcode" class="idcode" />
                </div>

                <div class="am-margin-top-sm">
                <span class="money-title  am-hide idcode_some">再优惠：¥</span>
                <span class="am-text-danger  am-hide idcode_some am-text-lg  js_other_discount_price price">-0.00</span>
                </div>
            </div>

            <div class="am-text-right am-cf am-block">
                应付：¥<span style="font-size: 24px;" class="am-text-danger js_total_price">{:($total_price+$tax_price-$discount_price)}</span>
            </div>
        </div>

        <div class="toolbar am-cf">
            <a target-form="confirm_form"  data-am-loading="{spinner: 'circle-o-notch', loadingText: '请求中...'}" data-no-alert="1" TARGET="_blank" href="{:U('Shop/Orders/add')}" style="width: 120px;" class="ajax-post am-btn am-btn-danger am-fr">提交订单</a>
        </div>

        </div>
    </form>
    <!-- END OF SHop-container -->

    </div>








    <!-- 收货地址新增 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="addressModel">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">使用新地址
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div style="padding-top: 12px;" class="am-modal-bd">
                <form class="address-form" method="post">
                    <input type="hidden" name="province" class="province"   />
                    <input type="hidden" name="city" class="city"   />
                    <input type="hidden" name="area" class="area"  />
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">所在地区<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <select name="provinceid" style="width: 120px;padding:5px;" class="am-form-field am-fl" id="province">
                                <option value="">=选择省份=</option>
                                <volist name="province" id="vo">
                                    <option value="{$vo.provinceid}">{$vo.province}</option>
                                </volist>
                            </select>
                            <select name="cityid" style="width: 120px;padding:5px;"  class="am-hide am-form-field am-fl" id="city"></select>
                            <select name="areaid" style="width: 120px;padding:5px;" class="am-hide am-form-field am-fl" id="area"></select>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">详细地址<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                             <textarea rows="3" name="detailinfo" style="width: 100%" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息"></textarea>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">邮政编码</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                        <input type="text" name="postal_code" class=" am-form-field " placeholder="如您不清楚邮递区号，请填写000000" />
                        </div>

                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">收件人<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="contactname" class=" am-form-field "  placeholder="长度不超过25个字符" />
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">收件人身份证号<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="id_card" class=" am-form-field "  placeholder="过海关时需要，请填写正确的身份证号!" />
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">联系电话<span class="am-text-danger">*</span></label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <input type="text" name="mobile" class=" am-form-field "  placeholder="长度不超过25个字符" />
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">&nbsp;</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <label type="checkbox">
                            <input type="checkbox" value="1" name="default" />设为默认地址</label>
                        </div>
                    </div>

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-md-2">&nbsp;</label>
                        <div class="am-u-lg-10 am-u-md-10 am-text-left">
                            <a target-form="address-form" href="{:U('Shop/Address/add')}" class="ajax-post am-btn am-btn-sm am-btn-primary"><I class="am-icon-save am-margin-right-sm"></I>保存</a>
                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>


    <include file="desktop_default/width/floor" />
</block>

<block name="area_footer">
    <script>
        function toggleIDCode(){
            $(".idcode_some").toggleClass("am-hide");
        }
        function calDiscount(){
            var idcode = $("#idcode").val();
            if($("#idcode").hasClass("ajax_doing")){
                return ;
            }

            if(idcode.length == 0){
                alertMsg("请填入优惠码后再查询!");
                return 0;
            }

            $.ajax({
                type:"POST",
                url:"{:U('Shop/Orders/calByIDCode')}",
                dataType:"json",
                data:{idcode:idcode},
                beforeSend:function(){
                    $("#idcode").addClass("ajax_doing");
                }
            }).done(function(data){
                var pay_price = {:($total_price+$tax_price-$discount_price)};
                $("#idcode").addClass("ajax_done");
                if(data.status){
                    var dis_price = parseFloat(data.info);
                    $(".js_other_discount_price").text("-" + dis_price.toFixed(2));
                    var total_price = pay_price - dis_price;
                    $(".js_total_price").text(total_price.toFixed(2));
                }else{
                    alertMsg("该优惠码无效!");
                }
            })
            .fail(function(){
                alertMsg("请求失败!");
            }).always(function(){ $("#idcode").removeClass("ajax_doing");});

        }

        function appendToArea(data){
            $("#area").removeClass("txt-gray");
            var area = $("#area");
            area.empty();
            if(!data){
                area.addClass("am-hide");
                return ;
            }
            if(data.length > 0){
                area.removeClass("am-hide");
            }
            for(var i=0;i<data.length;i++){
                if(i==0){
                    $(".area").val(data[i].area);
                }
                var ele = $("<option></option>");
                ele.text(data[i].area).attr("value",data[i].areaid).appendTo(area);
            }
        }
        function appendToCity(data){
            var city = $("#city");
            city.empty();
            if(!data){
                city.addClass("am-hide");
                return ;
            }
            if(data.length > 0){
                city.removeClass("am-hide");
            }
            for(var i in data){
                var ele = $("<option></option>");
                ele.text(data[i].city).attr("value",data[i].cityid).appendTo(city);
            }
        }
        $(function(){
            $(".order-confim .js_cal").click(function(){
                calDiscount();
            });
            $("#province").change(function(){
                var provinceID = $("#province").val();
                console.log(provinceID);
                var province = $("#province").find("option:selected").text();
                $(".province").val(province);
                if(provinceID){
                    $.post("{:U('Tool/City/getCitys')}",{provinceid:provinceID}).done(function(data){
                        console.log(data);
                        if(data.status){
                            appendToCity(data.info);
                        }else{

                        }
                    });
                }
            });
            $("#city").change(function(){
                $("#city").removeClass("txt-gray");
                var cityID = $("#city").val();
                if(cityID){

                    var city = $("#city").find("option:selected").text();
                    $(".city").val(city);

                    $.post("{:U('Tool/City/getArea')}",{cityid:cityID},function(data){

                        if(data.status){
                            appendToArea(data.info);
                        }else{

                        }
                        $("#pcaloading").hide();
                    });
                }
            });

            $("#area").change(function(){
                var area = $("#area").find("option:selected").text();
                $(".area").val(area);
            });

            //选择收货地址
            $(".address-item").click(function(){
                $(".address-item.addr-cur").removeClass('addr-cur');
                $(this).addClass('addr-cur');
                $(".adddressid").val($(this).data("addressid"));
            });

            //备注
            $(window).click(function(){
                $(".notes").removeClass("focus");
            });

            $(".notes textarea").click(function(ev){
                $(".notes").addClass("focus");
                ev.stopPropagation();
            })

            //历史code
            $("#select2_code").select2({
                'templateSelection':function(section){
                    console.log(section);
                    if(section.id.length > 0){
                        $("#idcode").val(section.text);
                    }
                    return section.text;
                }
            });

            $(".js_pay_type").click(function(){
                $(".js_pay_type.selected").removeClass("selected");
                $(this).addClass("selected");
            });

        })
    </script>

</block>
